import React, { Component } from 'react';
import { connect } from 'dva';
import { IndexPageStyle, IndexPageContent } from './style';
import TopPage from '../components/topPage';
import LeftPage from '../components/leftPage';
import CenterPage from '../components/centerPage';
import RightPage from '../components/rightPage';

class IndexPage extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    // 添加加载日志
    console.log('淘宝用户行为可视化大屏已加载 - 支持垂直滚动');
    
    try {
      // 初始化数据监听
      this.initializeDataListeners();
    } catch (error) {
      console.error('初始化数据监听失败:', error);
    }
  }

  // 初始化数据监听器
  initializeDataListeners = () => {
    console.log('正在初始化数据监听器...');
    // 这里可以添加WebSocket连接或定时数据更新逻辑
  }

  render() {
    return (
      <IndexPageStyle>
        <IndexPageContent>
          {/* 顶部区域 - 包含标题和KPI指标（分两行显示） */}
          <TopPage />

          {/* 内容区域 - 三列布局 */}
          <div className="content-section">
            {/* 左侧列 - 访问量相关图表 */}
            <div className="left-column">
              <LeftPage />
            </div>

            {/* 中间列 - 交易量和用户行为数据 */}
            <div className="center-column">
              <CenterPage />
            </div>

            {/* 右侧列 - 用户行为统计和商品数据 */}
            <div className="right-column">
              <RightPage />
            </div>
          </div>
        </IndexPageContent>
      </IndexPageStyle>
    );
  }
}

export default connect()(IndexPage);
